@extends('layouts/app')

@section('content')

    <div class="add-shops">
        <div class="weui-cells weui-cells_radio Thene">
            <div class="weui-cell ">
                <div class="weui-cell__hd">
                    <label for="name">店铺名称</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input f30" name="shop_name" placeholder="请输入店铺名称">
                </div>
            </div>
            <div class="weui-cells" style="margin-top: 0;">
                <div class="weui-cell weui-cell_select">
                    <div class="weui-cell__bd">
                        <select class="weui-select" name="type_id">
                            <option selected="" value="">店铺类型</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="weui-cells" style="margin-top: 0;">
                <div class="weui-cell weui-cell_select">
                    <div class="weui-cell__bd">
                        <select class="weui-select" name="type_rid">
                            <option selected="" value="">菜式类型</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="weui-cell ">
                <div class="weui-cell__hd">
                    <label for="">经营模块</label>
                </div>
                <div class="weui-cell__bd">
                    <label for="is_takeout" class="weui-agree">
                        <input id="is_takeout" name="is_takeout" type="checkbox" value="1" class="weui-agree__checkbox">
                        <span class="weui-agree__text">外卖</span>
                    </label>
                </div>
                <div class="weui-cell__bd">
                    <label for="is_list" class="weui-agree">
                        <input id="is_list" name="is_list" type="checkbox" value="1" class="weui-agree__checkbox">
                        <span class="weui-agree__text">排队</span>
                    </label>
                </div>
                <div class="weui-cell__bd">
                    <label for="is_reserve" class="weui-agree">
                        <input id="is_reserve" name="is_reserve" value="1" type="checkbox" class="weui-agree__checkbox">
                        <span class="weui-agree__text">预定</span>
                    </label>
                </div>
            </div>

            <div class="weui-cell ">
                <div class="weui-cell__hd">
                    <label for="name">店铺地址</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input f30" id="city-picker" name="shop_address" placeholder="请输入店铺地址">
                </div>
                <div class="weui-cell__dd">
                    <svg class="icon f40 gary3" aria-hidden="true">
                        <use xlink:href="#icon-tubiao-5"></use>
                    </svg>
                </div>
            </div>
            <div class="weui-cell ">
                <div class="weui-cell__hd">
                    <label for="name">详细地址</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input f30" name="address" placeholder="请输入店铺详细地址">
                </div>
            </div>

            <div class="weui-cell weui-cell_select" id="business_code" style="display: none;">
                <div class="weui-cell__bd">
                    <select class="weui-select" name="business_code">
                        <option selected="selected" value="1">商圈</option>
                    </select>
                </div>
            </div>

            <div class="weui-cell ">
                <div class="weui-cell__hd">
                    <label for="name">营业时间</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input f30 text-center" name="startTime" id="startTime" placeholder="开始营业">
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input f30 text-center" name="endTime" id="endTime" placeholder="结束营业">
                </div>
            </div>
        </div>
        <div class="weui-cells weui-cells_radio wstore">
            <div class="site weui-cells_checkbox">
                <div class="weui-cell ">
                    <div class="weui-cell__hd referral">
                        <label for="name">店铺简介</label>
                    </div>

                    <div class="weui-cell__bd">
                        <textarea class="weui-textarea f30" name="note" placeholder="请输入店铺简介" rows="2"></textarea>
                    </div>
                </div>
            </div>
            <div class="site weui-cells_checkbox">
                <div class="weui-cell ">
                    <div class="weui-cell__hd referral">
                        <label for="name">店铺门面</label>
                    </div>

                    <div class="weui-cell__bd">
                        <div class="shop-img">
                            <img  src="" alt="" id="shop_pic" class="img-responsive">
                            <label class="" for="x11"></label>
                            <form action="" id="img-form">
                                @csrf
                                <input id="x11" name="thumb" class="weui-uploader__input" type="file" accept="image/*" multiple="" onchange="saveImg('/api/shop/upload', '#img-form', getImg, '#shop_pic')">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="site weui-cells_checkbox">
                <div class="weui-cell ">
                    <div class="weui-cell__hd referral">
                        <label for="name">店铺头像</label>
                    </div>

                    <div class="weui-cell__bd">
                        <div class="shop-img">
                            <img  src="" alt="" id="shop_avatar" class="img-responsive">
                            <label class="" for="x12"></label>
                            <form action="" id="img-form1">
                                @csrf
                                <input id="x12" name="thumb" class="weui-uploader__input" type="file" accept="image/*" multiple="" onchange="saveImg('/api/shop/upload', '#img-form1', getImg, '#shop_avatar')">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="site weui-cells_checkbox">
                <div class="weui-cell ">
                    <div class="weui-cell__hd referral">
                        <label for="name">营业执照</label>
                    </div>

                    <div class="weui-cell__bd">
                        <div class="shop-img">
                            <img  src="" alt="" id="license_pic" class="img-responsive">
                            <label class="" for="x13"></label>
                            <form action="" id="img-form2">
                                @csrf
                                <input id="x13" name="thumb" class="weui-uploader__input" type="file" accept="image/*" multiple="" onchange="saveImg('/api/shop/upload', '#img-form2', getImg, '#license_pic')">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="weui-cell ">
                <div class="weui-cell__hd">
                    <label for="name">店主姓名</label>

                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input f30" name="name" placeholder="请输入店主姓名">
                </div>
            </div>
            <div class="weui-cell ">
                <div class="weui-cell__hd">
                    <label for="name">联系方式</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input f30" type="number" name="shop_phone" placeholder="请输入手机号">
                </div>
            </div>

        </div>
        <div class="demos-content-padded">
            <a href="javascript:;" class="weui-btn weui-btn_blue open-popup">确认</a>
        </div>
    </div>

    <script type="text/javascript" src="/jquery-weui/dist/js/city-picker.js" charset="utf-8"></script>
    <script>
        // 地址选择
        $("#city-picker").cityPicker({
            title: "请选择收货地址",
            onClose: function (res) {
                console.log("res", res);
                // 根据拿到的区域码去拿到商圈
                var code = res.value[2];
                getBusiness(code);
            }
        });

        // 获取店铺类型
        function getShopsType () {
            $.get("/api/typeData?module_id=1", {}, function (res) {
                if (typeof res === 'string') {
                    res = JSON.parse(res);
                }
                // 列出店铺类型
                var data = {};
                data['type'] = 'optionList';
                data['element'] = "select[name='type_id']";

                // 格式化数据
                var tData = getMyShopsTypeData(res.data);
                data['data'] = tData;
                data['data']['defaultVal'] = "";

                A.init(data);
            });
        }
        // 获取店铺类型
        function getdishType () {
            $.get("/api/typeReserveData", {}, function (res) {
                if (typeof res === 'string') {
                    res = JSON.parse(res);
                }
                console.log(res);
                // 列出店铺类型
                var data = {};
                data['type'] = 'optionList';
                data['element'] = "select[name='type_rid']";
                // 格式化数据
                var tData = getMyShopsTypeData(res.data);
                data['data'] = tData;
                data['data']['defaultVal'] = "";
                A.init(data);
            });
        }

        getShopsType();
        getdishType ();

        // 获取商圈
        function getBusiness(code) {
            $.get("/api/city/get", {id: code}, function (res) {
                if (typeof res === 'string') {
                    res = JSON.parse(res);
                }
                console.log("res", res);
                if (res.code == 200) {
                    if (!res.data.city || res.data.city.length < 1 ) {
                        $("select[name='business_code'] option:selected").val(code);
                    } else {
                        // 列出商圈
                        var data = {};
                        data['type'] = 'optionList';
                        data['element'] = "select[name='business_code']";

                        // 格式化数据
                        var myData = getMyData(res.data.city);
                        data['data'] = myData;
                        data['data']['defaultVal'] = code;

                        A.init(data);
                        $("#business_code").show();
                    }
                }
            });
        }
        // 上传图片回调
        var getImg = function (res, element) {
            if (typeof res === 'string') {
                res = JSON.parse(res);
            }
            console.log("element", element);
            console.log("res", res);
            if (res.code === 200) {
                $(element).attr("src", res.data).show();
                $(element).siblings("label").addClass("transparent");
            }else{
                $.toast(res.info, 'text');
            }
        };

        // 点击提交
        $(".open-popup").click(function () {
            var data = {};
            data['shop_name'] = $("input[name='shop_name']").val();
            data['shop_address'] = $("input[name='shop_address']").val();
            data['address'] = " " + $("input[name='address']").val();
            data['opentime'] = $("input[name='startTime']").val() + '--' + $("input[name='endTime']").val();
            data['note'] = $("textarea[name='note']").val();
            data['shop_pic'] = $("#shop_pic").attr("src");
            data['lience_pic'] = $("#license_pic").attr("src");
            data['shop_avatar'] = $("#shop_avatar").attr("src");
            data['name'] = $("input[name='name']").val();
            data['shop_phone'] = $("input[name='shop_phone']").val();
            data['business_code'] = $("select[name='business_code']").val();
            data['type_id'] = $("select[name='type_id']").val();
            data['type_rid'] = $("select[name='type_rid']").val();

            if ($("input[name='is_takeout']").prop("checked")) {
                data['is_takeout']  = $("input[name='is_takeout']").val();
            } else {
                data['is_takeout'] = 0;
            }
            if ($("input[name='is_reserve']").prop("checked")) {
                data['is_reserve']  = $("input[name='is_reserve']").val();
            } else {
                data['is_reserve'] = 0;
            }
            if ($("input[name='is_list']").prop("checked")) {
                data['is_list']  = $("input[name='is_list']").val();
            } else {
                data['is_list'] = 0;
            }

            if (!data['shop_name']) {
                return $.toast("店铺名不能为空", "text");
            } else if (!data['shop_address']) {
                return $.toast("请选择地址", "text");
            } else if (!data['address']) {
                return $.toast("详细地址不能为空", "text");
            } else if (!data['shop_pic']) {
                return $.toast("请上传店铺门面照", "text");
            } else if (!data['shop_avatar']) {
                return $.toast("请上传店铺头像", "text");
            } else if (!data['lience_pic']) {
                return $.toast("请上传运营执照", "text");
            } else if (!data['name']) {
                return $.toast("请上输入姓名", "text");
            } else if (!data['shop_phone']) {
                return $.toast("请上输入手机号", "text");
            }

            data["shop_address"] += data['address'];

            console.log("data", data);

            $.post("/api/shop/add", data, function (res){
                if (typeof res === 'string') {
                    res = JSON.parse(res);
                }
                $.toast(res.info, "text");

                if (res.code === 200) {
                    history.go(-1);
                }
            });
        });



        // 格式化店铺类型数据
        function getMyShopsTypeData (obj) {
            console.log("obj", obj);
            var data = [];
            for (var i = 0, len = obj.length; i < len; i++) {
                data.push({value: obj[i].id, name: obj[i].catname});
            }
            return data;
        }

        // 时间格式
        var hours = ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
                minutes = ['00','15','30','45'];
        $("#startTime").picker({
            title: "请选择您的手机",
            cssClass: 'maxHeight5',
            cols: [
                {
                    textAlign: 'center',
                    values: hours
                },
                {
                    textAlign: 'center',
                    values: [':']
                },
                {
                    textAlign: 'center',
                    values: minutes
                }
            ]
        });
        $("#endTime").picker({
            title: "请选择您的手机",
            cssClass: 'maxHeight5',
            cols: [
                {
                    textAlign: 'center',
                    values: hours
                },
                {
                    textAlign: 'center',
                    values: [':']
                },
                {
                    textAlign: 'center',
                    values: minutes
                }
            ]
        });
    </script>

@endsection
@extends('layouts/footer')
